<script setup lang="ts">
import { inject, computed } from "vue"

interface RadioProps {
    value?: string | number
    name?: string
}

const props = defineProps<RadioProps>()
const defaultValue = inject("defaultValue")
const themeValue = inject("themeValue")

const classNames = computed(() => {
    return {
        [`umrp-radio-${themeValue}`]: true,
        "umrp-radio-checked": defaultValue === props.value,
    }
})
</script>

<template>
    <div :class="classNames">
        <input type="radio" :name="name" :checked="defaultValue === props.value" />
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-radio {
    &-label {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 100px;
        color: var(--secondary-color);
        background-color: var(--bg-color);

        &-checked {
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            background-color: none;
        }
    }
}
</style>